<template>
    <AoeLayout>
        <AoeSide :width="sideWidth" class="global-side-wrapper">
            <AoeLogo class="global-logo">
                <h4 v-if="collapse">AOE</h4>
                <h1 v-else>AOE</h1>
            </AoeLogo>
            <div class="side-menu-wrapper">
                <AoeSchemaMenu
                    :items="menu.items"
                    :vertical="true"
                    :collapse="collapse"
                    class="global-menu"
                >
                </AoeSchemaMenu>
            </div>
        </AoeSide>
        <AoeLayout>
            <AoeHeader class="main-header">
                <AoeMenu class="global-header-left-menu">
                    <AoeMenuItem @click="oncollapse" class="item">
                        <ShrinkRightIcon v-if="collapse" class="icon" />
                        <SpreadLeftIcon v-else class="icon" />
                    </AoeMenuItem>
                    <AoeMenuItem class="hidden-xs-only item">
                        <RefreshOneIcon class="icon" />
                    </AoeMenuItem>
                    <AoeMenuItem class="item px-lr-15">
                        <AoeBreadcrumb :items="title" class="breadcrumb">
                        </AoeBreadcrumb>
                    </AoeMenuItem>
                </AoeMenu>

                <AoeMenu class="global-header-right-menu">
                    <AoeMenuItem class="item">
                        <AoeFullscreen v-slot="{ toggle, isFullscreen }">
                            <ScreenFullIcon v-if="!isFullscreen" @click="toggle()" class="icon" />
                            <ScreenRestoreIcon v-else @click="toggle()" class="icon" />
                        </AoeFullscreen>
                    </AoeMenuItem>
                    <AoeMenuItem class="item">
                        <AoeDropdown placement="bottom">
                            <WebsiteIcon class="icon" />
                            <template #content>
                                <AoeDropdownMenu>
                                    <AoeDropdownMenuItem> 中文 </AoeDropdownMenuItem>
                                    <AoeDropdownMenuItem> English </AoeDropdownMenuItem>
                                </AoeDropdownMenu>
                            </template>
                        </AoeDropdown>
                    </AoeMenuItem>
                    <AoeMenuItem class="item">
                        <AoeDropdown placement="bottom">
                            <UsernameIcon class="icon" />
                            <template #content>
                                <AoeDropdownMenu>
                                    <AoeDropdownMenuItem> 用户信息 </AoeDropdownMenuItem>
                                    <AoeDropdownMenuItem> 系统设置 </AoeDropdownMenuItem>
                                    <AoeDropdownMenuItem> 注销登录 </AoeDropdownMenuItem>
                                </AoeDropdownMenu>
                            </template>
                        </AoeDropdown>
                    </AoeMenuItem>
                    <AoeMenuItem class="item">
                        <MoreVerticalIcon class="icon" />
                    </AoeMenuItem>
                </AoeMenu>
            </AoeHeader>
            <AoeBody class="global-body">
                <div class="global-tab">
                    <div class="container">
                        <div class="item">
                            <span class="dot selected"></span>
                            <span>工作台</span>
                        </div>
                        <div class="item">
                            <span class="dot"></span>
                            <span>{{ JSON.stringify(value) }}</span>
                        </div>
                    </div>
                </div>
                <div class="global-content">
<!--                    <FormView v-model:value="value" @title="ontitle"></FormView>-->
<!--                    <TableView></TableView>-->
                    <AoeTreeEditor></AoeTreeEditor>

                </div>
            </AoeBody>
        </AoeLayout>
    </AoeLayout>
</template>

<script setup lang="ts">
import {
    AoeLayout,
    AoeSide,
    AoeHeader,
    AoeLogo,
    AoeBody,
    AoeMenuItem,
    AoeFullscreen,
    AoeDropdown,
    AoeDropdownMenu,
    AoeDropdownMenuItem,
    AoeBreadcrumb,
    AoeMenu,
} from 'ui-aoe';
import {
    SpreadLeftIcon,
    ShrinkRightIcon,
    RefreshOneIcon,
    ScreenRestoreIcon,
    ScreenFullIcon,
    MoreVerticalIcon,
    UsernameIcon,
    WebsiteIcon,
} from 'ui-aoe';
import { computed, ref } from 'vue';
import { AoeSchemaMenu } from 'menu-ui-aoe';
import type { IValues, MenuSchema } from 'aoe';
// import TableView from '../views/TableView.vue';
import AoeTreeEditor from '../views/AoeTreeEditor.vue';

const collapse = ref(false);
const sideWidth = computed(() => (collapse.value ? '60px' : '220px'));

const value = ref<IValues>({});

const title = ref<string[]>(['工作空间', '工作台']);

const ontitle = (t: string[]) => title.value = t;

const oncollapse = () => (collapse.value = !collapse.value);
const menu: MenuSchema = {
    items: [
        {
            label: '工作空间',
            id: 'work',
            url: '/work',
            icon: 'util',
        },
        {
            label: '表单页面',
            id: 'forms',
            icon: 'survey',
            items: [
                {
                    label: '行内表单',
                    id: 'form-inline',
                    url: '/form/inline',
                },
                {
                    label: '普通表单',
                    id: 'form-common',
                    url: '/form/common',
                },
            ],
        },
        {
            label: '列表页面',
            id: 'table',
            url: '/table',
            icon: 'table',
        },
    ],
    vertical: true,
};

</script>

<style scoped>
@import 'main.css';
</style>
